<template>
  <view class="news-card">
    <!-- 置顶标签 -->
    <view class="top-tag" v-if="isTop">置顶</view>

    <!-- 广告标签（适配广告卡片） -->
    <view class="ad-tag" v-if="cardType === 'ad'">{{ adTag }}</view>
    <view class="ad-info" v-if="cardType === 'ad'">{{ adInfo }}</view>

    <!-- 作者信息 -->
    <view class="author-info" v-if="authorAvatar && cardType !== 'ad'">
      <image class="avatar" :src="authorAvatar" mode="widthFix" />
      <text class="author-name">{{ author }}</text>
    </view>

    <!-- 新闻标题 -->
    <view class="news-title">{{ title }}</view>

    <!-- 新闻内容 -->
    <view class="news-content" v-if="content && cardType !== 'ad'">{{ content }}</view>

    <!-- 新闻图片（适配图片卡片） -->
    <image 
      class="news-img" 
      :src="image" 
      mode="widthFix" 
      v-if="image && cardType === 'image'"
    />

    <!-- 广告多图（适配广告卡片） -->
    <view class="ad-imgs" v-if="images && cardType === 'ad'">
      <image 
        class="ad-img-item" 
        :src="img" 
        mode="widthFix" 
        v-for="(img, idx) in images" 
        :key="idx"
      />
    </view>

    <!-- 底部信息 -->
    <view class="news-footer">
      <text class="news-time">{{ time }}</text>
      <text class="news-comments">{{ comments }}条评论</text>
    </view>
  </view>
</template>

<script>
export default {
  name: "CardViewText",
  // 接收所有传递的props
  props: {
    title: { type: String, default: "" },
    isTop: { type: Boolean, default: false },
    author: { type: String, default: "" },
    comments: { type: Number, default: 0 },
    time: { type: String, default: "" },
    content: { type: String, default: "" },
    authorAvatar: { type: String, default: "" },
    cardType: { type: String, default: "text" },
    adTag: { type: String, default: "" },
    adInfo: { type: String, default: "" },
    image: { type: String, default: "" },
    images: { type: Array, default: () => [] },
    showSearch: { type: Boolean, default: false }
  }
};
</script>

<style scoped>
/* 卡片基础样式 */
.news-card {
  background-color: #ffffff;
  padding: 20rpx;
  border-radius: 12rpx;
  box-sizing: border-box;
}

/* 置顶标签 */
.top-tag {
  display: inline-block;
  background-color: #d32f2f;
  color: #fff;
  font-size: 22rpx;
  padding: 4rpx 10rpx;
  border-radius: 6rpx;
  margin-bottom: 10rpx;
}

/* 广告标签 */
.ad-tag {
  display: inline-block;
  background-color: #ff6700;
  color: #fff;
  font-size: 22rpx;
  padding: 4rpx 10rpx;
  border-radius: 6rpx;
  margin-bottom: 10rpx;
}
.ad-info {
  font-size: 24rpx;
  color: #ff6700;
  margin-bottom: 10rpx;
}

/* 作者信息 */
.author-info {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}
.avatar {
  width: 40rpx;
  height: 40rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}
.author-name {
  font-size: 26rpx;
  color: #666;
}

/* 标题 */
.news-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  line-height: 44rpx;
  margin-bottom: 10rpx;
}

/* 内容 */
.news-content {
  font-size: 28rpx;
  color: #555;
  line-height: 40rpx;
  margin-bottom: 15rpx;
}

/* 单张图片 */
.news-img {
  width: 100%;
  height: 300rpx;
  border-radius: 8rpx;
  margin-bottom: 15rpx;
}

/* 广告多图 */
.ad-imgs {
  display: flex;
  gap: 10rpx;
  margin-bottom: 15rpx;
}
.ad-img-item {
  flex: 1;
  width: 100%;
  height: 120rpx;
  border-radius: 8rpx;
}

/* 底部信息 */
.news-footer {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #999;
  margin-top: 10rpx;
}
.news-time {
  margin-right: 20rpx;
}
</style>